<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>作者平台管理</el-breadcrumb-item>
        <el-breadcrumb-item>PC站运营</el-breadcrumb-item>
        <el-breadcrumb-item>签约书籍列表</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        :table-loading="loading"
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @row-save="rowSave"
      >
      <template slot="show_subscribe_coin_sum" slot-scope="scoped">
        <div class="row_edit">
          <input type="text" v-model="scoped.row.show_subscribe_coin_sum">
          <button class="edit_btn" @click="editCell(scoped.row)">确定</button>
        </div>
      </template>
      <template slot="show_reward_coin_sum" slot-scope="scoped">
        <div class="row_edit">
          <input type="text" v-model="scoped.row.show_reward_coin_sum">
          <button class="edit_btn" @click="editCell(scoped.row)">确定</button>
        </div>
      </template>
      <template slot="edit_info" slot-scope="scoped">
        <span>操作账号：{{scoped.row.edit_admin_id}}</span><br />
        <span>{{scoped.row.edit_time}}</span>
      </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { authorWorkData,uploadFile } from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      loading: false,
      page: {
        total: 0,
        pageSize: 10,
      },
      type: true,
      data: [],
      params: {},
      form: {},
      default: {
        // type: 1,
        // orderByList: "create_time&DESC",
        // is_approve:"$in1,2"
      },
      option: {
        addBtn: false,
        excelBtn: true,
        border: true,
        delBtn:false,
        viewBtn:true,
        menu:false,
        column: [
        //   {
        //     label: "作者ID",
        //     prop: "user_id",
        //     type: "input",
        //     search: true,
        //     row: true,
        //     rules: [
        //       {
        //         required: true,
        //         message: "",
        //       },
        //     ],
        //     addDisplay: true,
        //     editDisplay: false,
        //     editDisabled: true,
        //   },
        //    {
        //     type: "upload",
        //     label: "上传头像",
        //     limit: 1,
        //     dataType: "string",
        //     hide:true,
        //     prop: "headimgurl",
        //     listType: "picture-card",
        //     action: `${catUrl}${uploadFile.uploadFile}`,
        //     propsHttp: {
        //       url: "source",
        //     },
        //     span:24
        //   },
          {
            label: "日期",
            prop: "statistics_date",
            type: "daterange",
            search:true,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
          },
          {
            label: "作者id",
            prop: "user_id",
            type: "input",
            editDisplay: true,
            search: true,
            rules: [
              {
                required: true,
                message: "推送内容必须填写",
              },
            ],
          },
          {
            label: "作者名称",
            prop: "user_name",
            type: "input",
            dicData: [],
            search:true,
            editDisplay: true,
            rules: [
            ],
          },
          {
            label: "书籍id",
            prop: "book_id",
            type: "input",
            dicData: [],
            search:true,
            editDisplay: true,
            rules: [
            ],
          },
                    {
            label: "书籍名称",
            prop: "book_name",
            type: "input",
            dicData: [],
            search:true,
            editDisplay: true,
            rules: [
            ],
          },
          {
            label: "书籍订阅人数",
            prop: "subscribe_user",
            type: "intput",
            // hide: true,
            // dicData:[
            //     {label:'男',value:1},
            //     {label:'女',value:2}
            // ],
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          // {
          //   label: "订阅获取书币总数",
          //   prop: "subscribe_coin_sum",
          //   type: "input",
          //   span: 24,
          //   row: true,
          //   slot:true,
          //   // rules: [
          //   //   {
          //   //     required: true,
          //   //     message: "推送内容必须填写",
          //   //   },
          //   // ],
          //   addDisplay: false,
          //   editDisplay: false,
          // },
          {
            label: "获取书币数量",
            prop: "subscribe_coin_sum",
            type: "input",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "打赏获取书币数量",
            prop: "reward_coin_sum",
            type: "input",
            // slot: true,自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "作者显示获得书币数量",
            prop: "show_subscribe_coin_sum",
            type: "input",
            slot: true, //自定义单元格内容
            addDisplay: false,
            editDisabled: false,
          },
          {
            label: "作者显示打赏获得书币数量",
            prop: "show_reward_coin_sum",
            type: "input",
            slot: true, //自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
          {
            label: "操作信息",
            prop: "edit_info",
            type: "input",
            slot: true, //自定义单元格内容
            addDisplay: false,
            editDisplay: true,
            addDisabled: true,
            editDisabled: false,
          },
        ],
      },
    };
  },
  methods: {
    // 单元格编辑按钮
    editCell(row){
      this.rowUpdate(row)
      this.getList();
    },
    /**获取列表 */
    async getList(row, done, loading) {
      console.log(this.params)
      let response = await common(
        authorWorkData.statisticsAll,
        {...this.default,...this.params},
        this.page,
        "POST"
      );
      if (response.code == 1) {
        console.log(response)
        this.data = response.data;
        this.page = response.page;
       
      }
    },
    /**保存 */
    async rowSave(row, done, loading) {
      let response = await common(
        authorWorkData.save,
        this.form,
        {},
        "POST"
      );
      if (response.code == 1) {
        done();
        this.getList();
      }
      loading();
    },
    /**修改 */
    async rowUpdate(row, index, done, loading) {
      let params = {
        id: row.id,
        show_reward_coin_sum: +row.show_reward_coin_sum,
        show_subscribe_coin_sum: +row.show_subscribe_coin_sum,
      };
      let res = await common(
        authorWorkData.updateData,
        { ...this.form, ...params },
        {},
        "POST"
      );
      if (res.code == 1) {
        done();
        this.getList();
      }
    },
    /**刷新 */
    refreshChange() {},
    /**删除 */
    rowDel(row) {},
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**搜索 */
    searchChange(params, done,loading) {
      if(params.statistics_date){
        params.DateStart = params.statistics_date[0];
        params.DateEnd = params.statistics_date[1];
      }
        this.params = params;
        this.page.currentPage = 1;
        this.getList();
         done()
        // loading()
    },
  },
  mounted() {},
};
</script>
<style  scoped>
.headerImg img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
}
.el-table .cell .row_edit{
  display: flex;
  flex-direction: column;
}
.el-table .cell .row_edit .edit_btn{
  width: 50px;
  height: 24px;
  border: none;
  color: #fff;
  border-radius: 5px;
  margin: 5px auto;
  background-color: rgba(22, 155, 213, 1);
}
</style>